<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <div class="box" id="myid">
      <span>123</span>
    </div>
    <div class="box2">333</div>
    <script>
      // jq会对外暴露一个 $对象 符号 ，所有的jq操作都会基于这个 $符号
      // 一、jq里的ready方法：dom结构加载完毕；
      // 1.文档加载完毕 ；
      // let $ = "dfafds";
      //  $$
      // 1.文档结构加载完毕 ready方法
      // $(document).ready(function(){

      // })
      // 文档和资源加载完毕；
      // window.onload = function(){
      //      console.log(222);
      // }

      // 2.简写
      // $(function(){
      //     // let boxEle = document.querySelector(".box");
      //     // console.log(boxEle);
      //     console.log(111)

      // })

      // window.addEventListener("DOMContentLoaded",function(){
      //     console.log(1111);
      // })
      //二 选择器
      //   id选择器
      let ele = $("#myid");
      // console.log(ele);
      // 修改样式；
      ele.css("color", "red");
      // $("#myid").css("color","red");

      // 类名选择器
      // $(".box").css("color","red");

      // 标签
      // $("div").css("color","red");

      // 后代
      // $(".box      span").css("color","red");

      // 组选择器
      // 如果有多个元素 操作的话 ，那么jq会隐式迭代；
      $(".box span,.box2").css("color", "red");
    </script>
  </body>
</html>
